<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		
		<template v-if="page==1"> 
			<view class="body">				
				<view class="select-filter-bar">
					<view class="f-wb f-s32">{{selectDay.useTime}}</view>	
					<view class="date-tab">
						<view :class="['item day',{'active':params.week==2}]" @click="changeWeek(2)">上周</view>
						<view :class="['item date',{'active':params.week==1}]" @click="changeWeek(1)">本周</view>
						<view :class="['item month',{'active':params.week==3}]" @click="changeWeek(3)">下周</view>											
					</view> 
				</view>  
				<view class="date-time">
					<view class="weeks">
						<view class="item" v-for="(item,index) in weeks" :key="index">{{item}}</view>
					</view>
					<view class="days">
						<view class="item" :class="[{'checked':item.isCheck,'active':item.isActiveDay}]" v-for="(item,index) in days" :key="index" @click="checkDay(index)"><view class="value">{{item.day}}</view></view>
					</view>
				</view>  
				
				<template v-if="selectDay.date">
					<view  class="meal-tab">
						<view v-if="selectDay.is_breakfast==1" class="item " :class="{'desable':!selectDay.isActiveDay,'zaocan':selectDay.isActiveDay}">
							<view class="radio m-b4" > 				
								<view class="label f-wb">早餐</view>
							</view>
							<view class="meal-box">
								<image v-if="!selectDay.isActiveDay" class="icon" src="@/static/images/d_arrow.jpg" mode="widthFix"></image>
								<image v-else class="icon" src="@/static/images/z_arrow.jpg" mode="widthFix"></image>
								<view class="name" >
									<view class="m-b4" v-for="(item,index) in selectMeal.breakfast_foods" :key="index">{{item}}</view>
								</view>
							</view>
						</view>
						<view v-if="selectDay.is_lunch==1" class="item" :class="{'desable':!selectDay.isActiveDay,'wucan':selectDay.isActiveDay}">
							<view class="radio m-b4"> 
								<view class="label f-wb">午餐 </view>
							</view>
							<view class="meal-box">
								<image v-if="!selectDay.isActiveDay" class="icon" src="@/static/images/d_arrow.jpg" mode="widthFix"></image>
								<image v-else class="icon" src="@/static/images/w_arrow.jpg" mode="widthFix"></image>
								<view class="name" >
									<view class="m-b4" v-for="(item,index) in selectMeal.lunch_foods" :key="index">{{item}}</view>
								</view>
							</view>
						</view> 
					</view>
					
					<view class="checked-bar">
						<view v-if="selectDay.isActiveDay&&selectDay.is_breakfast==1" class="item m-r2" @click="checkMeal('zaocan')">
							<view class="iconfont f-s40 m-r1">
								<text v-if="!params.isZaocan" class="f-grey">&#xe614;</text>
								<text v-else class="f-blue">&#xe637;</text>
							</view>		
							<view>早餐</view>
						</view>
						<view v-if="selectDay.isActiveDay&&selectDay.is_lunch==1" class="item m-r2" @click="checkMeal('wucan')">
							<view class="iconfont f-s40 m-r1">
								<text v-if="!params.isWucan" class="f-grey">&#xe614;</text>
								<text v-else class="f-blue">&#xe637;</text>
							</view>		
							<view>午餐</view>
						</view>
						<view v-if="selectDay.is_dinner==1&&selectDay.has_dinner" class="item m-r2" @click="checkMeal('wancan')">
							<view class="iconfont f-s40 m-r1">
								<text v-if="!params.isWancan" class="f-grey">&#xe614;</text>
								<text v-else class="f-blue">&#xe637;</text>
							</view>		
							<view>晚餐</view>
						</view>
					</view>
				</template>
			</view> 
			
			<c-footer v-if="selectDay.date&&(selectDay.isActiveDay||selectDay.has_dinner)">
				<view slot="content" class="bottom-footer"> 
					<view class="btn add" @click="add(1)">提交</view>	
					<view class="btn dai" @click="add(2)">代报餐</view>
				</view> 
			</c-footer>
		</template>
		
		<template v-if="page==2">
			<view class="body" :class="{'bg-grey':page==2}">
				<view class=" m-b2" v-for="(item,index) in join_data.data" :key="index">
					<view v-if="index>0&&item.id==0" class="del-btn iconfont f-red f-s38" @click="del(index)">&#xe74b;</view>
					<u--form ref="uForm" class="form-wrap" >						
						<u-form-item label="代报姓名" labelWidth="180" prop="name" borderBottom="true" class="u-form-item">
							<u-input v-model="item.user_name" :disabled="item.id>0?true:false" placeholder="输入代报餐姓名" border="none" /> 
						</u-form-item> 
						<u-form-item label="报餐日期" labelWidth="180" prop="plan_finish_date" borderBottom="true" class="u-form-item" >
							<view class="form-wrap" style="width: 100%;">
								<view class="form-item" style="padding: 0;"> 
									<picker class="form-picker" :disabled="item.id>0?true:false" mode="date" @change="changeDate(index,$event)">
										<view class="picker">
											<u-input v-model="item.join_date" disabled placeholder="选择报餐日期" border="none" /> 
											<!-- <view class="select-data">
												<text v-if="item.join_date">{{item.join_date}}</text>
												<text v-else class="f-grey">选择报餐日期</text>
											</view> -->
											<view class="icon">
												<view class="iconfont f-s34">&#xe8d4;</view>
											</view>						
										</view>	
									</picker> 						
								</view> 
							</view>			
						</u-form-item> 
						<u-form-item v-if="item.join_date" label="餐次" labelWidth="180" prop="telephone" borderBottom="true" class="u-form-item"> 
							<view class="checked-bar" style="margin: 0 0;">
								<view v-if="item.selectDay.isActiveDay&&item.selectDay.is_breakfast=='1'" class="item m-r2" @click="join_data.currentIndex=index;checkMeal('zaocan')">
									<view class="iconfont f-s40 m-r1">
										<text v-if="item.is_breakfast==0" class="f-grey">&#xe614;</text>
										<text v-else class="f-blue">&#xe637;</text>
									</view>		
									<view>早餐</view>
								</view>
								<view v-if="item.selectDay.isActiveDay&&item.selectDay.is_lunch=='1'" class="item m-r2" @click="join_data.currentIndex=index;checkMeal('wucan')">
									<view class="iconfont f-s40 m-r1">
										<text v-if="item.is_lunch==0" class="f-grey">&#xe614;</text>
										<text v-else class="f-blue">&#xe637;</text>
									</view>		
									<view>午餐</view>
								</view>
								<view v-if="item.selectDay.is_dinner=='1'&&item.selectDay.has_dinner" class="item m-r2" @click="join_data.currentIndex=index;checkMeal('wancan')">
									<view class="iconfont f-s40 m-r1">
										<text v-if="item.is_dinner==0" class="f-grey">&#xe614;</text>
										<text v-else class="f-blue">&#xe637;</text>
									</view>		
									<view>晚餐</view>
								</view>
							</view>
						</u-form-item> 
					</u--form> 
				</view>
				<view class="add-user-btn m-t2" @click="addUser">新增代报</view>
			</view>
			<c-footer >
				<view slot="content" class="bottom-footer"> 
					<view class="btn add" @click="submitDaibao">提交</view>	 
				</view> 
			</c-footer>
		</template>
		 
	</view>
</template>

<script>  
	import {dateFormat} from '@/common/util.js'
	export default {
		data() {
			return { 
				page:'', 
				weeks:['日','一','二','三','四','五','六'],
				days:[],
				type:'',
				isLogin:false,
				isIphoneX:getApp().globalData.isIphoneX,
				id:'',
				params:{
					id:'',
					week:1,
					isZaocan:false,
					isWucan:false,
					isWancan:false
				},
				currentYear:'',
				currentMonth:'',
				currentDay:'',
				current_timestamp:'', 
				currentWeek:'',
				nextweek_end:'',
				selectDay:{},
				meals:[],
				selectMeal:{},
				joinlist:[],
				join_data:{
					num:0,
					data:[
						{
							id:"0",
							user_name:'',
							is_breakfast:'0',
							is_lunch:'0',
							is_dinner:'0',
							join_date:'',
							selectDay:{}
						}
					],
					currentIndex:0
				} ,
				db_date:{}
				
			}
		},
		onLoad(params) {
			this.page=params.page;
			
			this.getCurrenDate();
			this.getDates(this.currentYear,this.currentMonth,this.currentDay);		
			
			if(this.page==1){
				uni.setNavigationBarTitle({
					title:'报餐'
				})
			}
			if(this.page==2){
				uni.setNavigationBarTitle({
					title:'代报餐'
				})
				this.canteenjoinlistgl();
			}
			
			
		},
		methods: { 
			selectUser(idx){
				this.join_data.currentIndex=idx;
				uni.navigateTo({
					url:'/package_msg/mailUser/mailUser?scene=9&type=1'
				})
			},
			addUser(){
				this.join_data.num+=1;	
				let data={
					id:"0",
					user_name:'',
					is_breakfast:'0',
					is_lunch:'0',
					is_dinner:'0',
					join_date:'',
					selectDay:{}
				}
				this.$set(this.join_data.data,this.join_data.num,data);
			},
			del(idx){
				this.join_data.data.splice(idx,1);
				this.join_data.num-=1;	
			},
			async canteenjoinlistgl(){
				let res=await this.$api.user_api.canteenjoinlistgl({
					page: 1,
					limit: 1000,
					start_date: this.currentYear+'-'+(this.currentMonth<10?('0'+this.currentMonth):this.currentMonth)+'-'+(this.currentDay<10?('0'+this.currentDay):this.currentDay),
					end_date: this.nextweek_end,
					type: 1
				})   
				if(res.data.code==200){
					if(res.data.data.list.length>0){
						this.join_data.data=[];
						for(let i in res.data.data.list){
							let item={
								id: res.data.data.list[i].id,
								user_name: res.data.data.list[i].username,
								is_breakfast: res.data.data.list[i].is_breakfast,
								is_lunch: res.data.data.list[i].is_lunch,
								is_dinner: res.data.data.list[i].is_dinner,
								join_date: res.data.data.list[i].join_date,
								selectDay: {
									useTime:res.data.data.list[i].join_date,
								    is_breakfast: res.data.data.list[i].is_breakfast,
								    is_lunch: res.data.data.list[i].is_lunch,
								    is_dinner: res.data.data.list[i].is_dinner,
									isActiveDay: false, 
									has_dinner:false
								}
							}							
							this.join_data.data.push(item);
							this.join_data.num=this.join_data.data.length-1; 
							await this.setDateMeal(i,res.data.data.list[i].join_date);
						} 
					}
				}
			},
			async setDateMeal(idx,date){ 
				let selectDate_timestamp=new Date(date);
				this.join_data.currentIndex=idx; 
				let meal_date_index = this.days.findIndex(item => item.useTime == date); 
				if(meal_date_index>0){ 
					for(let i in this.days){
						if(date==this.days[i].useTime){
							this.join_data.data[idx].selectDay=this.days[i];   
						} 
					}
				}else{ 
					if(selectDate_timestamp<this.current_timestamp){  
						// 上周
						this.join_data.data[idx].selectDay.isActiveDay=false
						this.join_data.data[idx].selectDay.has_dinner=false;
					}else{ 
						// 下周
						this.join_data.data[idx].selectDay.isActiveDay=true;
						this.join_data.data[idx].selectDay.has_dinner=true;
					} 
				} 
				await this.canteenmenudinfo();  			 
			},
			
			async canteenjoindinfo(){
				let res=await this.$api.user_api.canteenjoindinfo({ 
					join_date:this.selectDay.useTime 
				})   
				if(res.data.code==200){ 	
					if(res.data.data){
						this.params.id=res.data.data.id;
						this.params.isZaocan=res.data.data.is_breakfast==1?true:false;
						this.params.isWucan=res.data.data.is_lunch==1?true:false;
						this.params.isWancan=res.data.data.is_dinner==1?true:false;
					}else{
						this.params.id='';
						this.params.isZaocan=false;
						this.params.isWucan=false;
						this.params.isWancan=false;
					}
					 
				}
			},
			async submitDaibao(){ 
 
				let res=await this.$api.user_api.canteenjoinaddall({
					join_data:JSON.stringify(this.join_data.data)
				}) 
				if(res.data.code==200){
					uni.showToast({
						icon:'success',
						title:this.params.id?'修改成功':'报餐成功',
						mask:true,
						duration:2000,
						success() {
							setTimeout(()=>{
								uni.navigateBack({
									delta:1
								})
							},2000)
						}
					})
					
				}
			},
			async canteenmenulist(){
				let res=await this.$api.user_api.canteenmenulist({
					page:1,
					limit:1000,
					start_date:this.days[0].useTime,
					end_date:this.days[6].useTime
				}) 
				if(res.data.code==200){ 				
					this.meals=res.data.data.list;
					
					if(this.selectDay){
						this.meals.forEach(i=>{														
							if(i.set_date==this.selectDay.useTime){
								if(i.breakfast_menu.indexOf('\n')){
									i.breakfast_foods=i.breakfast_menu.split('\n');
								}
								if(i.lunch_menu.indexOf('\n')){
									i.lunch_foods=i.lunch_menu.split('\n');
								}	
								this.selectMeal=i;
							}
						})
					} 
				}
			},
			
			async canteenjoinlist(){
				let res=await this.$api.user_api.canteenjoinlist({
					page:1,
					limit:1000,
					start_date:this.days[0].useTime,
					end_date:this.days[6].useTime
				})   
				if(res.data.code==200){ 				
					this.joinlist=res.data.data.list; 
					this.days.forEach(i=>{
						this.joinlist.forEach(j=>{
							if(i.useTime==j.join_date){ 
								i.is_breakfast=j.is_breakfast;
								i.is_lunch=j.is_lunch;
								i.is_dinner=j.is_lunch;
							}
						})
					}) 
				}
			},
			
			
			// 获取当前年月日
			getCurrenDate(){
				let date=new Date();
				this.current_timestamp=Number(date.getTime());
				this.currentYear = date.getFullYear();   // 当前年 2020
				this.currentMonth = date.getMonth()+1;   // 当前月 2
				this.currentDay = date.getDate();       // 当前日 27  
			},
			 
			
			// 日期生成主逻辑
			getDates:function(year,month,day){
				month=month-1;   //  处理月份0开始
				let calendatArr=[];
				let date=new Date();   
				
				// 获取当前天  当前2020-2-1 
				 
				let firstDay=new Date(year,month,day);	  
				
				// 获取当前月1号是周几  当前周六，
				let firstWeekDay = firstDay.getDay(); 
				
				// 计算开始时间戳  2-1日时间戳-6天前时间戳 即2月1日前6天
				let startTime='';
				if(this.params.week==2){
					startTime = firstDay - (firstWeekDay+7)* 24 * 60 * 60 * 1000;
				}
				if(this.params.week==1){
					startTime = firstDay - firstWeekDay* 24 * 60 * 60 * 1000;
				}
				if(this.params.week==3){
					startTime = firstDay - (firstWeekDay-7)* 24 * 60 * 60 * 1000;
				}
				
				// 获取下周六日期 
				let nextweek=firstDay - (firstWeekDay-13)* 24 * 60 * 60 * 1000;
				this.nextweek_end=dateFormat(nextweek,'YYYY-MM-DD'); 
				 
				let endTime=this.currentYear+'-'+(this.currentMonth<10?('0'+this.currentMonth):this.currentMonth)+'-'+(this.currentDay<10?('0'+this.currentDay):this.currentDay)+' '+'18:00:00';			
				let diffTime=this.current_timestamp-new Date(endTime).getTime();  
				
				let dinnerEndTime=this.currentYear+'-'+(this.currentMonth<10?('0'+this.currentMonth):this.currentMonth)+'-'+(this.currentDay<10?('0'+this.currentDay):this.currentDay)+' '+'17:00:00';
 
				// 日历日期包含数据		
				for (let i=0; i<7; i++) { 				 
					calendatArr.push({  
						date: new Date(startTime + i * 24 * 60 * 60 * 1000).getTime(),
						day: new Date(startTime + i * 24 * 60 * 60 * 1000).getDate(),
						year:new Date(startTime + i * 24 * 60 * 60 * 1000).getFullYear()+'',
						month:new Date(startTime + i * 24 * 60 * 60 * 1000).getMonth()+1,
						week:new Date(startTime + i * 24 * 60 * 60 * 1000).getDay(),
						isActiveDay: false,
						isOrder:false,
						isCheck :false,
						is_breakfast: '',
						is_lunch: '',
						is_dinner: '',
						has_dinner:true
						
					})
				};
				
				calendatArr.forEach(i => { 
					i.useTime=i.year+'-'+(i.month<10?('0'+i.month):i.month)+'-'+(i.day<10?('0'+i.day):i.day);					
					if(diffTime>0){
						if(i.date>=Number(date.getTime()+1 * 24 * 60 * 60 * 1000)){
							i.isActiveDay=true; 
						}else{
							i.isActiveDay=false;
						}
					}else{
						if(i.date>=Number(date.getTime())){
							i.isActiveDay=true; 
						}else{
							i.isActiveDay=false;
						} 
					}
					if((i.date-new Date(dinnerEndTime).getTime())<0){
						i.has_dinner=false; 
					}else{
						i.has_dinner=true; 
					}
					if (i.year == this.currentYear && i.month == this.currentMonth && i.day == this.currentDay) {
					 	i.isCheck = true;						
						this.selectDay=i;
					} 
									   
				})  
				this.days=calendatArr;  
				this.canteenmenulist();
				this.canteenjoinlist();
				this.canteenmenudinfo();
			},
			
			checkDay(idx){
				this.days.forEach(i=>{
					i.isCheck = false;
				})
				this.days[idx].isCheck=true; 				
				this.selectDay=this.days[idx]; 
				
				let dinnerEndTime=this.selectDay.useTime+' '+'17:00:00';
				if((this.selectDay.date-new Date(dinnerEndTime).getTime())>0){
					this.selectDay.has_dinner=false; 
				}else{
					this.selectDay.has_dinner=true; 
				}
				this.canteenmenudinfo(); 
				this.canteenjoindinfo();
				this.canteenmenulist(); 
			},
			
			
			changeDate(idx,e){ 
				let selectDate_timestamp=new Date(e.detail.value);
				this.join_data.currentIndex=idx;
				let meal_date_index = this.days.findIndex(item => item.useTime == e.detail.value); 
				if(meal_date_index>0){ 
					for(let i in this.days){
						if(e.detail.value==this.days[i].useTime){
							this.join_data.data[idx].selectDay=this.days[i];   
						} 
					}
				}else{ 
					if(selectDate_timestamp<this.current_timestamp){  
						this.join_data.data[idx].selectDay={
							isActiveDay: false,
							is_breakfast: '',
							is_lunch: '',
							is_dinner: '',
							has_dinner:''
						}
					}else{ 
						this.join_data.data[idx].selectDay={
							isActiveDay: true,
							useTime:e.detail.value,
							is_breakfast: '',
							is_lunch: '',
							is_dinner: '',
							has_dinner:''
						} 
					} 
				}
				let dinnerEndTime=this.currentYear+'-'+(this.currentMonth<10?('0'+this.currentMonth):this.currentMonth)+'-'+(this.currentDay<10?('0'+this.currentDay):this.currentDay)+' '+'17:00:00';
				if((selectDate_timestamp-new Date(dinnerEndTime).getTime())<0){
					this.join_data.data[idx].selectDay.has_dinner=false; 
				}else{
					this.join_data.data[idx].selectDay.has_dinner=true; 
				}
				if(!this.join_data.data[idx].selectDay.isActiveDay&&!this.join_data.data[idx].selectDay.has_dinner){
					uni.showToast({
						icon:'none',
						title:'当前日不可报餐',
						duration:1000
					})					 
					return
				}
				this.join_data.data[idx].join_date=e.detail.value;
				this.join_data.data[idx].selectDay.useTime=e.detail.value; 
				this.canteenmenudinfo(); 
				
			},
			
			changeWeek(id){
				if(this.params.week==id) return;
				this.selectDay={};
				this.params.week=id;
				this.getDates(this.currentYear,this.currentMonth,this.currentDay);				
			},
			
			checkMeal(type){  
				if(this.page==1){
					if(type=='zaocan'){
						this.params.isZaocan=!this.params.isZaocan;
					}
					if(type=='wucan'){
						this.params.isWucan=!this.params.isWucan;
					}
					if(type=='wancan'){
						this.params.isWancan=!this.params.isWancan;
					}
				}	
				
				if(this.page==2){
					if(type=='zaocan'){
						this.join_data.data[this.join_data.currentIndex].is_breakfast=this.join_data.data[this.join_data.currentIndex].is_breakfast==1?0:1;
					}
					if(type=='wucan'){
						this.join_data.data[this.join_data.currentIndex].is_lunch=this.join_data.data[this.join_data.currentIndex].is_lunch==1?0:1;
					}
					if(type=='wancan'){
						this.join_data.data[this.join_data.currentIndex].is_dinner=this.join_data.data[this.join_data.currentIndex].is_dinner==1?0:1;
					}
				}
				
			},
			
			async canteenmenudinfo(){
				let res=await this.$api.user_api.canteenmenudinfo({
					set_date:this.page==1?this.selectDay.useTime:this.join_data.data[this.join_data.currentIndex].selectDay.useTime
				})     
				if(res.data.code==200){
					if(res.data.data){ 		
						if(this.page==1){
							this.selectDay.is_breakfast=res.data.data.breakfast_status;
							this.selectDay.is_lunch=res.data.data.lunch_status;
							this.selectDay.is_dinner=res.data.data.dinner_status;
						}
						if(this.page==2){	 
							this.join_data.data[this.join_data.currentIndex].selectDay.is_breakfast=res.data.data.breakfast_status;
							this.join_data.data[this.join_data.currentIndex].selectDay.is_lunch=res.data.data.lunch_status;
							this.join_data.data[this.join_data.currentIndex].selectDay.is_dinner=res.data.data.dinner_status;  
						}
					}else{ 
						if(this.page==1){
							this.selectDay.is_breakfast='';
							this.selectDay.is_lunch='';
							this.selectDay.is_dinner='';
						}
						if(this.page==2){
							this.join_data.data[this.join_data.currentIndex].selectDay.is_breakfast='';
							this.join_data.data[this.join_data.currentIndex].selectDay.is_lunch='';
							this.join_data.data[this.join_data.currentIndex].selectDay.is_dinner='';
						}
					} 
				}   
			},
			
			async add(type){
				if(type==1){
					let res={};
					if(this.params.id){ 
						res=await this.$api.user_api.canteenjoinedit({
							id:this.params.id,
							is_breakfast:this.params.isZaocan?1:0,
							is_lunch:this.params.isWucan?1:0,
							is_dinner:this.params.isWancan?1:0,
							join_date:this.selectDay.useTime
						}) 
					}else{ 
						if(!this.selectDay.isActiveDay&&!this.selectDay.has_dinner){
							uni.showToast({
								icon:'none',
								title:'当前日不可报餐',
								duration:1000
							})
							return 
						}	
						if(!this.params.isZaocan&&!this.params.isWucan&&!this.params.isWancan){
							uni.showToast({
								icon:'error',
								title:'请先选餐次',
								mask:true,
								duration:2000
							})
							return
						}
						res=await this.$api.user_api.canteenjoinadd({
							is_breakfast:this.params.isZaocan?1:0,
							is_lunch:this.params.isWucan?1:0,
							is_dinner:this.params.isWancan?1:0,
							join_date:this.selectDay.useTime
						}) 
					}
					 
					if(res.data.code==200){
						uni.showToast({
							icon:'success',
							title:this.params.id?'修改成功':'添加成功',
							mask:true,
							duration:2000
						})
					}
				}
				if(type==2){
					if(!this.selectDay.isActiveDay&&!this.selectDay.has_dinner){
						uni.showToast({
							icon:'none',
							title:'当前日不可报餐',
							duration:1000
						})
						return 
					}
					uni.navigateTo({
						url:"/package_tools/baocan/baocan?page=2"
					})
				}
				
			}
			
		},
		computed:{
			baocan_user_update(){
				return this.$store.state.baocan_user_update
			}
		},
		watch:{
			baocan_user_update(newer,older){
				if(newer!=older&&this.page==2){ 
					this.join_data.data[this.join_data.currentIndex].user_name=newer.username;
					this.join_data.data[this.join_data.currentIndex].user_id=newer.id; 
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	page,.page{
		height: 100%;
	}
	.body{
		height: 100%;
		background: #fff;
	}
	.bg-grey{
		background: #f5f5f5;
	}
	.del-btn{
		text-align: right;
		margin: 20rpx;
	}
	.form-wrap{
		padding: 0 20rpx;
	}
	.checked-bar{
		display: flex;
		align-items: center;
		margin: 80rpx 40rpx;
		.item{
			display: flex;
			align-items: center;
			font-size: 30rpx;
		}
	}
	.add-user-btn{
		height:34px;
		line-height: 34px; 
		flex: 1;
		margin: 0 20rpx;
		text-align: center;
		font-size: 30rpx;
		border: 2rpx solid #609FF7;
		border-radius: 10rpx;
		background: #609FF7;
		color:#fff; 
	}
	.bottom-footer{
		display:flex;
		justify-content: space-around;
		.btn{
			height:34px;
			line-height: 34px; 
			flex: 1;
			margin: 0 20rpx;
			text-align: center;
			font-size: 30rpx;
			border: 2rpx solid #609FF7;
			border-radius: 10rpx;
		}
		.manage{
			background: #E7F1FE;
			color:#609FF7 ; 
		}
		.add{
			background: #609FF7;
			color:#fff ; 
		}
		.dai{
			background: none;
			color:#609FF7;
		}
	}
	.select-filter-bar {
		display: flex;
		justify-content: space-between; 
		align-items: center;
		margin: 30rpx 20rpx 30rpx;
	}
	.date-tab {
		display: flex;
		flex-shrink: 0;
		margin: 0 20rpx 20rpx 0;
		width: 250rpx;
		height: 50rpx;
		line-height: 50rpx;
		border-radius: 15rpx;
		border: 1rpx solid #1199FE;
		background: #fff;
	}	
	.date-tab .item {
		flex-grow: 1;
		width: 1%;
		flex-shrink: 0;
		line-height: 50rpx;
		text-align: center;
		font-size: 30rpx;
	}
	.date-tab .month.active {
		background: #1199FE;
		border-top-right-radius: 13rpx;
		border-bottom-right-radius: 13rpx;
		color: #fff;
	}
	
	.date-tab .date.active {
		background: #1199FE;
		color: #fff;
	}
	
	.date-tab .day.active {
		background: #1199FE;
		border-top-left-radius: 13rpx;
		border-bottom-left-radius: 13rpx;
		color: #fff;
	}
	.date-time{
		margin-bottom: 80rpx;
		.weeks,.days{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			.item{
				display: flex;
				justify-content: center;
				align-items: center;
				width: 1%;
				flex-grow: 1;
				text-align: center;
				font-size: 32rpx;
				color: #999999;
				.value{
					display: flex;
					justify-content: center;
					align-items: center;
					width: 70rpx;
					height: 70rpx;
				}
			}
			.active{				
				font-weight: bold;
				color: #000;
			}
			.checked{
				.value{
					background: #09f;
					border-radius: 50%;
					color: #fff;
				}
			}
			.current{
				.value{
					background: #ff9600;
					border-radius: 50%;
					color: #fff;
				}
			}
		}
		.weeks{
			.item{
				color: #000;
			}
		}
	}
	.meal-tab{
		display: flex;
		justify-content: center;
		align-items: center;
		.item{
			margin: 0 20rpx;
			.radio{
				display: flex;
				justify-content: center;
				align-items: center;
				.iconfont{
					color: #ccc;
				}
				.label{
					font-size: 32rpx;
				}
			}
			.meal-box{
				position: relative;
				width: 220rpx;
				height: 350rpx;
				padding: 40rpx;
				border-radius: 15rpx;
				font-size: 30rpx;
				.icon{
					position: absolute;
					left:50%;
					top: -25rpx;
					margin-left: -12px;
					width: 24px;
				}
				textarea{
					width: 100%;
				}
			} 
		}
		.desable{
			.label{
				color:#ABABAB;
			}
			.meal-box{
				text-align: center;
				background: #F5F5F5;
				border: 2px solid #E5E5E5;
			}
		}
		.zaocan{
			.radio{ 
				.iconfont{ 
					color: #71AAF7;
				}
				.label{
					color: #71AAF7;
				}
			} 
			.meal-box{
				text-align: center;
				background: #EEF5FE;
				border: 2px solid #71AAF7;
			}
		}
		.wucan{
			.radio{
				.iconfont{ 
					color: #F4BB76;
				}
				.label{
					color: #F4BB76;
				}
			} 
			.meal-box{
				text-align: center;
				background: #FEF7E9;
				border: 2px solid #F4BB76;
			}
		}
	}
</style>
